<template>
  <!-- <div class="flex flex-col">
    <div class="b-line" />
    <div class="b-title">未归还工具</div>
    <div ref="boxRef" class="flex-1 border-box p-24">
      <el-table
        ref="tableRef"
        :data="tableData"
        style="width: 100%"
        :height="height"
        row-class-name="kb-tr"
        header-row-class-name="kb-th"
        @mouseenter="autoScroll(true)"
        @mouseleave="autoScroll(false)"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        >
          <template #header>
            <div class="font-14">{{ item.label }}</div>
          </template>
          <template #default="scope">
            <div class="font-14">
              {{
                item.formatter
                  ? item.formatter(scope.row)
                  : scope.row[item.prop]
              }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div> -->
  <autoList title="借出工具详情" :data="props.data" :columns="columns" />
</template>

<script lang="ts" scoped setup>
import autoList from "../components/auto-list.vue";

import { realWH } from "@/utils";
import dayjs from "dayjs";
import { computed, onMounted, ref, onBeforeUnmount } from "vue";
import { noReturnType } from "@/utils/dict";
const props = defineProps({
  data: {
    default: () => []
  }
});
/* 数据 */
const columns = [
  { prop: "lendTime", label: "时间" },
  { prop: "toolName", label: "工具名" },
  { prop: "userNickName", label: "用户名" },
  {
    prop: "noReturnType",
    label: "未归还类型",
    formatter: row => {
      const temp = noReturnType(row.noReturnType);
      return temp ? temp.name : "";
    }
  }
];
// const tableData = computed(() => {
//   const list = [] as any;
//   // for (let i = 0; i < 20; i++) {
//   //   list.push({
//   //     toolName: i + "名字a撒还贷款哈萨克等哈上课啦回答了",
//   //     lendReturnTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
//   //   });
//   // }
//   // return list;
//   return props.data;
// });

/* 高度 */
// const boxRef = ref();
// const height = ref(300);
// onMounted(() => {
//   height.value = boxRef.value.offsetHeight - realWH(40).w;
// });

// /* 自动滚动 */
// let scrolltimer = null;
// const tableRef = ref(null);

// const autoScroll = stop => {
//   if (!tableData.value.length) return false;
//   const tableBody = tableRef.value.$refs.bodyWrapper;
//   const divData = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
//   if (divData.scrollHeight == divData.clientHeight) {
//     return false;
//   }
//   if (stop) {
//     window.clearInterval(scrolltimer);
//   } else {
//     const step = 5;
//     scrolltimer = window.setInterval(() => {
//       divData.scrollTop += step;
//       if (
//         divData.clientHeight + divData.scrollTop >=
//         divData.scrollHeight - 1
//       ) {
//         divData.scrollTop = 0;
//       }
//     }, 150);
//   }
// };
// onMounted(() => {
//   setTimeout(() => {
//     autoScroll(false);
//   }, 1000);
// });
// onBeforeUnmount(() => {
//   autoScroll(true);
// });
</script>

<style lang="scss" scoped>
@import url(../table.scss);
</style>
